body
    {
        font-family: Arial, sans-serif;
        line-height: 150%;
        letter-spacing: 0.8pt;
        font-size: calc(1.5vh + 1.5vw);
        margin: 0;
    }
    .wbg
    {
        background-color: white !important;
    }
    p:has(+ .source-inline)
    {
        display: inline;
    }
    .videocaption
    {
        display: none;
        visibility: hidden;
        font-size: calc(1vh + 1vw);
        margin: 0;
        line-height: normal;
        z-index: 1000;
    }
    h1, h2, h3
    {
        color: rgb(25, 25, 25);
        margin: 0;
        text-align: center;
    }
    h3, .questions
    {
        font-size: 25pt;
        line-height: 100%;
    }
    .slides h3
    {
        padding-top: 3vh;
    }
    /*ol
    {
        padding-inline-start: 1.3em;
    }
    .slides-small ol
    {
        padding-inline-start: calc(1.3vh + 1.3vw);
    }
    ul
    {
        padding-inline-start: 0.95em;
    }*/
    .slides
    {
        background-image: url('../images/old_map.png');
        background-color: rgba(255,255,255,0.1);
        background-blend-mode: lighten;
        margin-left: min(2vw, 2vh);
        margin-right: min(2vw, 2vh);
        margin-top: min(2vw, 2vh);
        margin-bottom: min(2vw, 2vh);
        padding-left: min(2vw, 2vh);
        padding-right: min(2vw, 2vh);
        padding-bottom: min(1vw, 1vh);
        height: 94.5vh;
        /* Here: */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .titleslide
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 90vh;
        
    }
    .buttons
    {
        display: flex;
        justify-content: space-between;
        /* Here: */
        margin-bottom: -2vh;
        width: 94vw;
        align-self: center;
    }
    .imagecontainer + .buttons
    {
        margin-top: -8vh;
    }
    .CClogo
    {
        border-width: 0;
        height: 15pt;
        vertical-align: middle;
        opacity: 1;
    }
    .questions
    {
        margin-top: -14.5vh;
        text-align: center;
        margin-bottom: 0;
    }
    .next
    {
        text-decoration: none;
        color: black;
        width: fit-content;
        background-color: #deb887;
        -webkit-box-shadow: 0 0 5pt black;
        box-shadow: 0 0 7pt black;
        border-radius: 7pt;
        padding: 5pt;
        -webkit-transition: all 0.5s; /* Safari */
        transition: all 0.5s;
    }
    .next:hover
    {
        color: black;
        -webkit-box-shadow: 0 0 3pt black;
        box-shadow: 0 0 3pt black;
        -webkit-transition: all 0.5s; /* Safari */
        transition: all 0.5s;
    }
    .next:focus
    {
        color: black;
        -webkit-box-shadow: 0 0 0pt black;
        box-shadow: 0 0 0pt black;
        -webkit-transition: all 0.5s; /* Safari */
        transition: all 0.5s;
    }
    .copyright
    {
        width: 100%;
        font-size: calc(1vh + 1vw);
        text-align: center;
        margin-bottom: 0.75vh;
        line-height: normal;
    }
    .copyright a
    {
        color: rgb(133,0,65);
        font-weight: normal;
        line-height: initial;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .copyright a:hover
    {
        color: black;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .footer
    {
        margin-top: -22vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
    }
    .pagenum
    {
        position: absolute;
        right: min(5vw, 5vh);
        top: min(4vw, 4vh);
        font-size: calc(1vh + 1vw);
    }
    .videocontainer
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .video
    {
        width: 88.8vh;
        height: 50vh;
        z-index: 1000;
    }
    .columns
    {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .images
    {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    .supercontainer
    {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .imagecontainer
    {
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
    .imagecontainer-side
    {
        position: absolute;
        right: min(13vw, 13vh);
        top: min(4vw, 4vh);
        flex-direction: row;
    }
    .imagecontainer-side > a
    {
        margin-right: 1vw !important;
    }
    .shell
    {
        background-color: rgb(30, 30, 30);
        color: rgb(224, 224, 224);
        padding: 1vh;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }
    .source
    {
        background-color: white;
        padding: 1vh;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }
    .source-inline
    {
        display: inline-block;
        margin: 0;
        padding: 0;
        vertical-align: top;
    }
    .source-inline .hljs-title.function, .source-inline .hljs-title.function.invoke, .source-inline .function_
    {
        padding: unset !important;
    }
    .source-long
    {
        height: 70vh;
        overflow-y: scroll;
    }
    .source-long .hljs-comment
    {
        color: #580762 !important;
        font-style: unset !important;
    }
    ::-webkit-scrollbar
    {
        -webkit-appearance: none;
        width: 10px;
    }
    ::-webkit-scrollbar-thumb
    {
        border-radius: 5px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }
    .hljs-ln-numbers
    {
        text-align: right;
        color: #7e7e7e;
        border-right: 1px solid #999;
        vertical-align: top;
        padding-right: 5px !important;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .hljs-ln-code
    {
        padding-left: 1vw !important;
    }
    .source .hljs-type, .source .hljs-keyword
    {
        color: blue;
        font-weight: bold;
    }
    .hljs-string
    {
        color: green;
    }
    .source .hljs-comment
    {
        color: black;
        font-style: italic;
    }
    .hljs-title.function, .hljs-title.function.invoke, .function_
    {
        padding: 1px;
        background-color: #fcf4a3;
    }
    .hljs-number
    {
        color: #e5383b;
    }
    .hljs-literal
    {
        color: #800080;
    }
    .hljs-meta
    {
        color: #a53860;
    }
    .shell .hljs-built_in
    {
        color: #e6c07b;
    }
    .prompt
    {
        color: #32CD32;
    }
    pre
    {
        white-space: pre-wrap;
    }
    .portrait-separator
    {
        display: none;
        border: 1px solid black;
    }
    .caption
    {
        font-size: calc(0.8vh + 0.8vw);
        line-height: normal;
        width: 20vw;
        margin: 0;
        text-align: justify;
    }
    .slides-small
    {
        font-size: calc(1.2vh + 1.2vw);
        line-height: 130%;
        letter-spacing: normal;
    }
    .hanging-indent p
    {
        padding-left: 0.5in;
        text-indent: -0.5in;
    }

    @page
    {
        size: 1280px 577.33px;
        margin: 0;
    }

    @media print
    {
        @page
        {
            size: 1280px 577.33px;
            margin: 0;
        }

        .titleslide
        {
            height: unset;
        }

        .next
        {
            display: none;
            visibility: hidden;
        }

        .videocaption
        {
            display: block;
            visibility: visible;
        }
    }
    
    @media screen and (orientation: portrait)
    {
        .imagecontainer-side
        {
            position: unset;
            flex-direction: column;
        }
        .pagenum
        {
            left: unset;
            right: 0.3cm;
            top: 0.3cm;
            font-size: 4vw;
        }
        body
        {
            background-image: url('../images/old_map.png');
            background-color: rgba(255,255,255,0.1);
            background-blend-mode: lighten;
            line-height: initial;
            font-size: 7vw !important;
        }
        .slides
        {
            background-image: unset;
            background-color: unset;
            background-blend-mode: unset;
            margin: 0 2.5vw 0 2.5vw;
            padding: 0;
            min-height: 100vh;
            font-size: 7vw !important;
        }
        .slides-small
        {
            font-size: 7vw !important;
            line-height: initial;
        }
        .titleslide
        {
            height: initial;
        }
        .footer
        {
            margin-top: 0;
        }
        .video
        {
            width: 95vw !important;
            height: 53.5vw !important;
        }
        .columns
        {
            display:block;
        }
        .imagecontainer
        {
            margin-top: 2vh !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .imagecontainer > a:first-child
        {
            display:block;
            overflow: scroll;
            max-height: 62vh;
            width: 100%;
        }
        img
        {
            width: 100% !important;
            height: initial !important;
            z-index: 0 !important;
        }
        iframe
        {
            width: 100% !important;
            height: 54vh !important;
        }
        .CClogo
        {
            width: initial !important;
            height: 3vw !important;
        }
        .caption
        {
            width: initial !important;
            font-size: 12pt;
            z-index: 0 !important;
        }
        h3, .questions
        {
            font-size: 8vw !important;
        }
        ol, .slides-small ol
        {
            padding-inline-start: 1.2em;
        }
        ul
        {
            padding-inline-start: 0.95em;
        }
        .buttons
        {
            position: fixed;
            bottom: calc(1vh + 1vw + 6vw + 2vw);
        }
        .copyright
        {
            font-size: 3vw;
            margin-top: calc(4vh + 8vw);
        }
        .imagecontainer + .buttons
        {
            margin-top: 0;
        }
        .imagecontainer a:nth-last-child(3) > img
        {
            width: 100% !important;
        }
        .imagecontainer iframe
        {
            width: 100% !important;
        }
        .videocaption
        {
            font-size: inherit;
            display: block;
            visibility: visible;
            margin-top: 2vh;
        }
        .questions
        {
            margin-top: initial;
        }
        .images, .supercontainer
        {
            display: block;
        }
        .portrait-separator
        {
            display: block;
        }
        .normal-size
        {
            font-size: 7vw !important;
        }
    }


    /* Smaller Devices */
    @media screen and (min-width : 320px) and (max-width : 1200px) and (orientation : landscape){
        .imagecontainer-side
        {
            position: unset;
            flex-direction: column;
        }
        .pagenum
        {
            left: unset;
            right: 0.3cm;
            top: 0.3cm;
            font-size: calc(1.3vh + 1.3vw);
        }
        body
        {
            background-image: url('../images/old_map.png');
            background-color: rgba(255,255,255,0.1);
            background-blend-mode: lighten;
            line-height: initial;
            font-size: 22pt !important;
        }
        .slides
        {
            background-image: unset;
            background-color: unset;
            background-blend-mode: unset;
            margin: 0 2.5vw 0 2.5vw;
            padding: 0;
            min-height: 100vh;
            font-size: 22pt !important;
        }
        .slides-small
        {
            font-size: 22pt !important;
            line-height: initial;
        }
        .titleslide
        {
            height: initial;
        }
        .footer
        {
            margin-top: 0;
        }
        .imagecontainer
        {
            margin-top: 2vh !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .imagecontainer > a:first-child
        {
            display: flex;
            justify-content: center;
            overflow: scroll;
            max-height: 54vh;
            width: 100%;
        }
        img
        {
            width: 100% !important;
            height: 100% !important;
            z-index: 0 !important;
        }
        .CClogo
        {
            width: initial !important;
            height: calc(1vh + 1vw) !important;
        }
        .caption
        {
            width: initial !important;
            text-align: center;
            font-size: 12pt;
            z-index: 0 !important;
        }
        .imagecontainer a:nth-last-child(3)
        {
            max-height: unset;
        }
        .imagecontainer a:nth-last-child(3) > img
        {
            height: 70vh !important;
            width: unset !important;
        }
        .imagecontainer a:nth-last-child(3) + p
        {
            text-align: center;
        }
        h3, .questions
        {
            font-size: 26pt !important;
        }
        ol, .slides-small ol
        {
            padding-inline-start: 1.2em;
        }
        ul
        {
            padding-inline-start: 0.8em;
        }
        .buttons
        {
            position: fixed;
            bottom: calc(1.2vh + 2.8vw);
        }
        .copyright
        {
            font-size: calc(1.1vh + 1.1vw);
            margin-top: calc(1.2vh + 7.2vw);
        }
        .imagecontainer iframe
        {
            width: 100% !important;
        }
        .video
        {
            width: 88.8vh !important;
            height: 50vh !important;
        }
        .caption
        {
            margin-top: 1vh;
        }
        iframe
        {
            width: 100% !important;
            height: 54vh !important;
        }
        .questions
        {
            margin-top: initial;
        }
        .images, .supercontainer
        {
            display: block;
        }
        .portrait-separator
        {
            display: block;
        }
        .normal-size
        {
            font-size: 22pt !important;
        }
    }